import { ReactNode, useContext } from "react";
import "./index.scss";
import cs from "classnames";
import CompactContext from "../Space/Compact/CompactContext";

interface TButtonProps {
  children?: ReactNode;
  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  type?: "primary" | "dashed" | "link" | "text" | "default";
  classNames?: string | string[];
}

export default function TButton(props: TButtonProps) {
  const {
    children = "按钮",
    onClick,
    type = "default",
    classNames = [],
  } = props;

  const { focus } = useContext(CompactContext);

  return (
    <>
      <button
        className={cs(type, "t-button", classNames, focus && "focus")}
        onClick={onClick}
      >
        <span>{children}</span>
      </button>
    </>
  );
}
